{extend name='layout/app' /}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/person.css">
<style>
    a:link,a:hover{
        text-decoration: none;
    }
    .inner-cont >div{
        padding: 5px 0;
    }
    .publish{
        position: absolute;
        left: 260px;
        top: 5%;
        display: inline-block;
        align-content: center;
    }
    .el-message-box {
        min-width: 85%;
    }
</style>
{/block}

{block name='content'}
<div id="app">
    <div class="nav">
        <i class="el-icon-arrow-left icon_left" @click="back"></i>
        <div>朋友圈</div>
        <i class="iconfont icon-home icon_right" @click="home"></i>
    </div>

    <div class="init-info">
        <div class="inner-cont-wrapper">
            <div class="inner-cont">
                <div class="nickname">{$Think.session.user.name}</div>
                <div class="phone">{$Think.session.user.phone|substr=0,3}****{$Think.session.user.phone|substr=-4,4}</div>
            </div>
            <div class="avatar">
                <img src='{$Think.session.user.image}' alt="" style="border-radius: 50%">
            </div>
            <div class="publish">
                <template>
                    <el-button type="text" @click="sendMsg">发表</el-button>

                    <el-dialog title="内容" :visible.sync="areaText" center width="98%" :close-on-click-modal="shadow">
                        <el-input
                        type="textarea"
                        :rows="5"
                        maxlength="100"
                        placeholder="请输入内容,不可超过100字"
                        v-model="text">
                        </el-input>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="areaText = false">取 消</el-button>
                            <el-button type="primary" @click="sendText">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </div>
        </div>
    </div>
    <hr style="border: 1px solid white;">
    <div class="meet-info">
        <div style="width: 100%;" >
            <template v-for="item in list">
            <div class="item" style="width: 90%;display: flex;margin: 0 5%;padding: 15px 0;" >
                <div class="avatar" style="width: 12%;margin: 0 16px 0 0;">
                    <img :src='item.head_img' alt="" style="border-radius: 50%">
                </div>
                <div class="met" style="font-size: 16px;width: 95%;letter-spacing: 2px;line-height: 16px; ">
                    <div class="name" style="font-weight: bold;line-height: 16px;font-size: 18px;margin-bottom: 10px;">{{ item.name }}</div>
                    <div class="textarea" style="width: 100%;">{{ item.content }}</div>
                    <div class="mettime" style="float: right;margin-top: 20px;font-size: 14px;color: #8D8D8D;">{{ item.create_time }}</div>
                </div>
            </div>
            <hr class="shr"  style="color: grey;">           
            </template>
        </div>
        <div class="page-nav" style="background-color: white;text-align: center;position: fixed;bottom: 0;width: 100%;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="pageChange"
                    :total="total"
                    :current-page="currentPage">
            </el-pagination>
        </div>
        <div class="loading"  v-loading="loading">
        </div>
    </div>
</div>
{/block}
{block name="footer"} {/block}


{block name='js'}
<script>
    var that
    new Vue({
        el:'#app',
        data() {
            return {
                center: true,
                shadow: false,
                areaText: false,
                text: '',
                currentPage: 1,
                total: 0,
                loading: true,
            }
        },
        mounted() {
            that = this  //生成vue副本
        },
        created() {
            that = this
            $('.loading').height(screen.height - 90)
            this.getData()
        },
        methods: {
            sendText() {
                if(this.text == ""){
                    this.areaText = false
                    that.$message("取消发布");
                    return;
                }
                $.post('/index/person/sendText.html', {text: that.text}, function(res){
                    if(res.code == 0){
                        that.$message({
                            type: 'success',
                            message: '发布成功'
                        })
                        that.areaText = false
                    }else{
                        that.$message.error(res.msg);
                    }
                })
            },
            sendMsg() {
                this.text = ''
                this.areaText = true

            },
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            getData(){
                this.list = []
                this.loading = true
                $('.loading').show()
                $.get('/index/person/getcontent', {page: this.currentPage, status: this.status}, function(res){
                    // console.log(res)
                    if(res.data){
                        that.total = res.total
                        that.list = res.data
                        that.loading = false
                        $('.loading').hide()
                    }
                })
            },
            pageChange(page) {
                this.currentPage = page
                this.getData()
            },
        }
    });
    $(function () {
        $('.shr').width(screen.width);
    })
</script>
{/block}